<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">	
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
		html,body{
            position:relative;
            height:100%;
        }
		body{
            margin:0;
            padding:0;
        }
        .swiper-container{
        	width: 100%;
        	height: 100%;
        	margin-left: auto;
        	margin-right: auto;
        }
        .swiper-slide{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/* 视差效果就是在一个只有文字没图片的白色轮播图下单独放个图片 */
		.parallax-bg{
			background-image:url(images/ad-01.jpg);
			position: absolute;
			left:0;
			top:0;
			width: 130%;      /* 130%是给切换轮播图时候移动图片预留的 */
			height:100%;
			background-size: cover;      /* cover和center同上 */
			background-position: center;
	</style>
</head>
<body>
	<div class="swiper-container">
		<div class="parallax-bg" data-swiper-parallax="-23%"></div>
		<div class="swiper-wrapper">
			<div class="swiper-slide">第1页</div>
			<div class="swiper-slide">第2页</div>
			<div class="swiper-slide">第3页</div>
			<div class="swiper-slide">第4页</div>
			<div class="swiper-slide">第5页</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev swiper-button-white"></div>
		<div class="swiper-button-next swiper-button-white"></div>
	</div>

	<script src="js/swiper.min.js"></script>
	<script>
		var swiper=new Swiper(".swiper-container",{
			pagination:".swiper-pagination", 
			paginationClickable:true,
			spaceBetween:20, 
			prevButton:".swiper-button-prev",
			nextButton:".swiper-button-next",
			
			parallax:true,     /* 为true才有视差效果 */
		});
	</script>	
</body>
</html>